<template>
  <div class="picker-container">
    <van-field
      :label="label"
      :border="border"
      :required="required"
      :value-class="valueClass"
      :focus="focus"
      input-class="picker-input__field"
      :error="error"
      :error-message="errorMessage"
    >
      <view
        slot="button"
        class="picker-input"
      >
        <picker
          mode="selector"
          @change="bindPickerChange"
          @cancel="bindPickerCancel"
          :value="index"
          :range="dataArray"
          :range-key="contentColumn"
          ref="content"
        >
          <slot name="content">
            <view
              class="picker-input__value"
              v-if="content"
            > {{contentText}} </view>
            <view
              class="picker-input__placeholder"
              :class="[{'picker-input__error': error}]"
              v-else
            > {{placeholder}} </view>
          </slot>
        </picker>
      </view>
    </van-field>
  </div>
</template>

<script>
// import Vue from 'vue'
export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    label: {
      required: true,
      default: '字段名称'
    },
    // 选项数组
    data: {
      required: true,
      type: Array
    },
    // 默认选项
    contentColumn: {
      type: String,
      default: ''
    },
    // 默认选项
    valueColumn: {
      type: String,
      default: ''
    },
    // 默认选项
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    titleWidth: {
      type: String
    },
    valueClass: {
      type: String
    },
    focus: {
      type: Boolean,
      default: false
    },
    errorMessage: {
      type: String,
      default: ''
    },
    error: {
      type: Boolean,
      default: false
    },
    required: Boolean,
    border: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      content: '',
      contentText: '',
      dataArray: [],
      index: 0
    }
  },
  mounted () {
    console.log(this.data)
    this.dataArray = this.data
    if (this.value) {
      this.index =
        this.data.indexOf(this.value) !== -1
          ? this.data.indexOf(this.value)
          : 0
    }
    this.content = this.value
  },
  methods: {
    bindPickerChange (e) {
      const valueIndex = e.mp.detail.value
      if (valueIndex) {
        this.index = valueIndex
        const checkedItem = this.dataArray[valueIndex]
        this.content = checkedItem
        this.contentText = checkedItem
        if (typeof (checkedItem) === 'object') {
          if (this.contentColumn) {
            this.contentText = checkedItem[this.contentColumn]
          }
          if (this.valueColumn) {
            this.content = checkedItem[this.valueColumn]
          }
        }
      }
      this.$emit('change', this.content)
    },
    bindPickerCancel (e) {
      this.$emit('cancel', e)
    }
  }
}
</script>

<style lang="less">
.picker-input {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: UICTFontTextStyleBody;
  &__field {
    width: 0 !important;
  }
  &__placeholder {
    color: #c8c9cc;
  }
  &__error {
    color: #ee0a24;
  }
}
.van-field__body {
  justify-content: flex-end;
}
</style>